<template>
  <div class="game-m-index">
    <el-table
      style="height: 100%"
      :data="gameList"
      stripe
      empty-text="暂无数据"
      show-overflow-tooltip
    >
      <el-table-column prop="coverImage" label="游戏封面" width="100">
        <template #default="scoped">
          <el-image
            class="image"
            loading="lazy"
            :src="scoped.row.coverImage"
            :preview-src-list="[scoped.row.coverImage]"
            preview-teleported
            hide-on-click-modal
            fit="cover"
          >
            <template #error>
              <el-image
                class="image"
                loading="lazy"
                :src="errorImageUrlConstant"
                :preview-src-list="[errorImageUrlConstant]"
                preview-teleported
                hide-on-click-modal
              />
            </template>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="游戏名" width="180" />
      <el-table-column prop="price" label="游戏价格" width="180">
        <template #default="scoped">
          <el-tag :type="scoped.row.priceD === null ? 'success' : 'danger'">
            {{ scoped.row.price }}
          </el-tag>
          <span> ￥</span>
        </template>
      </el-table-column>
      <el-table-column prop="priceD" label="游戏折扣" width="180">
        <template #default="scoped">
          <el-tag v-if="scoped.row.priceD !== null" type="success">
            {{ scoped.row.priceD }}
          </el-tag>
          <span v-if="scoped.row.priceD">$</span>
        </template>
      </el-table-column>
      <el-table-column prop="releaseDate" label="发布日期" width="180" />
      <el-table-column
        fixed="right"
        label="操作"
        width="auto"
        min-width="180px"
      >
        <template #default="scoped">
          <el-button
            link
            type="primary"
            size="small"
            @click="toGameInfo(scoped.row.id)"
            >详情</el-button
          >
          <el-button
            link
            type="primary"
            size="small"
            @click="toGameEdit(scoped.row.id)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-config-provider :locale="zhCn">
      <el-pagination
        layout="sizes, prev, pager, next, jumper"
        :page-count="pageCount"
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-config-provider>
  </div>
</template>

<script lang="ts" setup>
import { getGameListApi } from "@/apis/game";
import { ElLoading } from "element-plus";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import { errorImageUrlConstant } from "@/constant";
import router from "@/router";

const gameList = ref([]);

const pageCount = ref(0);

const param = ref({
  page: 1,
  size: 10,
});

async function handleSizeChange(val: number) {
  param.value.size = val;
  await getGameListData(param.value);
}

async function handleCurrentChange(val: number) {
  param.value.page = val;
  await getGameListData(param.value);
}

async function getGameListData(param: any) {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
  try {
    const res = await getGameListApi(param);
    gameList.value = res.data.records;
    pageCount.value = res.data.pages;
  } catch (error) {
    console.log(error);
  } finally {
    loading.close();
  }
}

function toGameInfo(id: any) {
  router.push("gameinfo/" + id);
}

function toGameEdit(id: any) {
  router.push("gameedit/" + id);
}

onMounted(async () => {
  await getGameListData({});
});
</script>

<style scoped>
.game-m-index {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.image {
  width: 100%;
  aspect-ratio: 1 / 1;
}
.pagination {
  position: relative;
  bottom: 0;
  /* height: 10vh; */
  margin: 10px 0;
}
</style>
